<template>
	<view class="order-code bg-white">
		<view class="order-code__header">
			<view>
				<text class="fw-600">{{$t('order.券码信息')}}</text>
			</view>
			<!-- <view>
				<text class="c-secondary e-font-24">{{$t('order.券码信息')}}</text>
			</view> -->
		</view>
		<view class="e-p-t-40 e-p-l-30 e-p-r-30 e-p-b-24">
			<view class="e-flex-xy-center e-m-b-32 ">
				<view :class="[info.state !== 1 && 'order-code__mask']"  @tap="handlePreviewCode">
					<e-qrcode ref="qrcodeRef" :text="info.writeOffCode" :size="100"></e-qrcode>
				</view>
			</view>
			<view class="order-code__text-box e-flex-xy-center">
				<text class="e-font-28 fw-500 e-p-r-20">{{$t('setting.验证码')}}</text>
				<text :class="[info.state !== 1 && 'order-code__text-box__txt e-rela']" class=" e-font-28 fw-500">{{info.writeOffCode}}</text>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
	// #ifdef MP-WEIXIN
	// 将自定义节点设置成虚拟的，更加接近Vue组件的表现
	options: {
		virtualHost: true
	}
	// #endif
});
</script>

<script setup lang="ts">
	import { ref } from 'vue';
	import type { AppointmentOrderItem } from '@/common/request/api';
	
	const props = withDefaults(
		defineProps<{
			info: AppointmentOrderItem;
		}>(),
		{}
	);
	
	let codeImage = '';
	const qrcodeRef = ref();
	const getCodeImage = () =>
		new Promise((resolve, reject) => {
			
			if (!codeImage) {
				uni.showLoading({
					title: 'loading...'
				});
				qrcodeRef.value?.toTempFilePath({
					success: (res: { tempFilePath: string; }) => {
						codeImage = res.tempFilePath;
						resolve(codeImage);
					},
					fail() {
						reject();
					},
					complete() {
						uni.hideLoading();
					}
				});
			}else{
				resolve(codeImage);
			}
		});
	
	const handlePreviewCode = () => {
		getCodeImage().then(() => {
			uni.previewImage({
				current: 0,
				urls: [codeImage]
			});
		});
	};

</script>

<style lang="scss" scoped>
	.order-code {
		border-radius: 20rpx;
		overflow: hidden;
		&__header{
			padding:20rpx 30rpx;
		}
		&__mask{
			opacity: .2;
		}
		&__text-box {
			height: 90rpx;
			border-radius: 10rpx;
			border: 2rpx solid #E6E6E6;
			&__txt{
				&::after{
					content: '';
					position: absolute;
					height:2rpx;
					left:0;
					right:0;
					top:50%;
					background-color: #333;
				}
			}
		}
	}
</style>